import React, { FC } from 'react';
import { Link, LinkProps, useResolvedPath, useMatch } from 'react-router-dom';

export const CustomLink: FC<LinkProps> = ({
  children,
  to,
  className,
  ...props
}) => {
  const resolved = useResolvedPath(to);
  const match = useMatch({ path: resolved.pathname, end: true });
  const activeClassName = match ? 'active' : '';
  return (
    <Link
      to={ to }
      className={ `${className} ${activeClassName}` }
      { ...props }
    >
      { children }
    </Link>
  );
};
